<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta content="关键词" name="keywords" />
    <meta content="关键描述" name="description" />
    <title>品优购</title>
    <!-- 初始化样式 -->
    <link rel="stylesheet" href="./css/base.css" />
    <!-- 引入字体图标库 -->
    <link rel="stylesheet" href="./css/iconfont.css" />
    <!-- 引入网站的公用区域样式 -->
    <link rel="stylesheet" href="./css/common.css" />
    <!-- 引入favicon 图标 -->
    <link type="image/x-icon" rel="shortcut icon" href="./favicon.ico" />
    <!-- 引入自己的css -->
    <link rel="stylesheet" href="./css/detail.css">
  </head>

  <body>
    <!-- 快捷导航开始  -->
    <div class="shortcut">
      <div class="w">
        <div class="short_left fl">
          品优购欢迎您！ <a href="./login.html">请登录</a>
          <a href="./reg.html" class="red">免费注册</a>
        </div>
        <div class="short_links fr">
          <a href="javascript:;">我的订单</a><span>|</span>
          <a href="javascript:;">我的品优购 <i class="iconfont">&#xe6b7;</i></a
          ><span>|</span> <a href="javascript:;">品优购会员</a><span>|</span>
          <a href="javascript:;">企业采购</a><span>|</span>
          <a href="javascript:;">关注品优购 <i class="iconfont">&#xe6b7;</i></a
          ><span>|</span>
          <a href="javascript:;">客户服务 <i class="iconfont">&#xe6b7;</i></a
          ><span>|</span>
          <a href="javascript:;">网站导航 <i class="iconfont">&#xe6b7;</i></a>
        </div>
      </div>
    </div>
    
    <!-- 快捷导航结束  -->
    <!-- header s -->

    <div class="header w">
      <!-- logo -->
      <div class="logo">
        <h1>
          <a href="./index.html">品优购</a>
        </h1>
      </div>
      <!-- search -->
      <div class="search">
        <form action="">
          <input type="text" class="fl" placeholder="语言开发" />
          <button class="fr">搜索</button>
        </form>
        <div class="hot_words">
          <a href="javascript:;" class="red">优惠购首发</a>
          <a href="javascript:;">亿元优惠</a>
          <a href="javascript:;">9.9元团购</a>
          <a href="javascript:;">美满99减30</a>
          <a href="javascript:;">办公用品</a>
          <a href="javascript:;">电脑</a>
          <a href="javascript:;">通信</a>
        </div>
      </div>
      <!-- shop_car -->
      <div class="shop_car">
        <div class="num">0</div>
        <span class="iconfont red">&#xe65e;</span>
        我的购物车
        <span class="iconfont">&#xe6b6;</span>
      </div>
    </div>
    <!-- header e -->

    <!-- nav s -->
    <div class="nav_w">
      <div class="w">
        <!-- 左侧 -->
        <div class="nav_left fl">
          <!-- hd -->
          <div class="hd">全部商品分类</div>
          <!-- bd -->
          <div class="bd" >
            <ul>
              <li>
                <a href="javascript:;">手机</a>、
                <a href="javascript:;">数码</a>、 <a href="javascript:;">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="javascript:;">手机</a>、
                <a href="javascript:;">数码</a>、 <a href="javascript:;">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="javascript:;">手机</a>、
                <a href="javascript:;">数码</a>、 <a href="javascript:;">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="javascript:;">手机</a>、
                <a href="javascript:;">数码</a>、 <a href="javascript:;">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="javascript:;">手机</a>、
                <a href="javascript:;">数码</a>、 <a href="javascript:;">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="javascript:;">手机</a>、
                <a href="javascript:;">数码</a>、 <a href="javascript:;">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="javascript:;">手机</a>、
                <a href="javascript:;">数码</a>、 <a href="javascript:;">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="javascript:;">手机</a>、
                <a href="javascript:;">数码</a>、 <a href="javascript:;">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="javascript:;">手机</a>、
                <a href="javascript:;">数码</a>、 <a href="javascript:;">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="javascript:;">手机</a>、
                <a href="javascript:;">数码</a>、 <a href="javascript:;">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="javascript:;">手机</a>、
                <a href="javascript:;">数码</a>、 <a href="javascript:;">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>

              <li>
                <a href="javascript:;">手机</a>、
                <a href="javascript:;">数码</a>、 <a href="javascript:;">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="javascript:;">手机</a>、
                <a href="javascript:;">数码</a>、 <a href="javascript:;">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="javascript:;">手机</a>、
                <a href="javascript:;">数码</a>、 <a href="javascript:;">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
              <li>
                <a href="javascript:;">手机</a>、
                <a href="javascript:;">数码</a>、 <a href="javascript:;">通信</a
                ><span class="iconfont icon-yjt fr"></span>
              </li>
            </ul>
          </div>
        </div>
        <!-- 右侧 -->
        <div class="nav fl">
          <ul>
            <li><a href="javascript:;">服装城</a></li>
            <li><a href="javascript:;">美妆馆</a></li>
            <li><a href="javascript:;">传智超市</a></li>
            <li><a href="javascript:;">全球购</a></li>
            <li><a href="javascript:;">闪购</a></li>
            <li><a href="javascript:;">团购</a></li>
            <li><a href="javascript:;">拍卖</a></li>
            <li><a href="javascript:;">有趣</a></li>
          </ul>
        </div>
      </div>
    </div>
   <!-- 面包屑导航 开始 -->
   <div class="crumb">
     <div class="w">
       <a href="#">电脑、办公</a><span class="iconfont">&#xe6b6;</span>
       <a href="#">外设产品</a><span class="iconfont">&#xe6b6;</span>
       <a href="#">移动固态硬盘</a><span class="iconfont">&#xe6b6;</span>
       <a href="#">三星（SAMSUNG）</a><span class="iconfont">&#xe6b6;</span>
       <a href="#">三星MU-PA1T0B/CN</a><span class="iconfont">&#xe6b6;</span>
     </div>       
   </div>
   <!-- 面包屑导航 结束 -->

   <!-- 产品信息展示 开始 -->
   <div class="w up clearfix ">
     <!-- 左侧图片区域 -->
     <div class="pic400 fl">
       <img src="./upload/left.png" alt="">
     </div>
     <!-- 右侧 产品信息区域 -->
     <div class="pr_txt fr">
       <!-- h3 -->
       <h3>Apple iPhone 6s（A1700）64G玫瑰金色 移动通信电信4G手机</h3>
       <!-- pr_ad -->
       <div class="pr_ad">
        推荐选择下方[移动优惠购],手机套餐齐搞定,不用换号,每月还有花费返
       </div>
       <!-- 价格 -->
       <dl class="price">
         <dt>价　　格</dt>
         <dd>￥5299.00 <span class="fr">累计评价612188</span></dd>
       </dl>
       <!-- 促销 -->
       <dl class="cuxiao">
         <dt>促　　销</dt>
         <dd>满999.00另加20.00元，或满1999.00另加30.00元，或满2999.00另加40.00元，即可在购物车换 购热销商品 详情 》</dd>
       </dl>

       <!-- 支持 -->
       <dl class="zhichi">
        <dt>支　　持</dt>
        <dd>以旧换新，闲置手机回收 4G套餐超值抢 礼品购</dd>
      </dl>

      <!-- 配送 -->
      <dl class="peisong">
        <dt>配&nbsp;&nbsp;送&nbsp;&nbsp;至</dt>
        <dd>
          <div>北京海淀区中关有货支持 99元免运费 |货到付款 |211限时达</div>
          <div>由自营发货，并提供售后服务。11:00前完成下单，预计今天（08月10日）送达</div>
        </dd>
      </dl>
      <!-- 竖线 -->
      <div class="shuxian"></div>
       <!-- 颜色 -->
       <dl class="pr_color">
         <dt>选择颜色</dt>
         <dd>
           <a href="#">金色</a>
           <a href="#">银色</a>
           <a href="#">青色</a>
           <a href="#">黑色</a>
          </dd>
       </dl>
        <!-- 版本 -->
        <dl class="pr_banben">
          <dt>选择版本</dt>
          <dd>
            <a href="#">公开版</a>
            <a href="#">移动4G</a>
           </dd>
        </dl>

         <!-- 容量 -->
         <dl class="pr_rongliang">
          <dt>选择容量</dt>
          <dd>
            <a href="#">16G</a>
            <a href="#">64G</a>
            <a href="#">126G</a>
           </dd>
        </dl>
        <!-- 购买方式 -->
        <dl class="pr_buy">
          <dt>购买方式</dt>
          <dd>
            <a href="#">官方标配</a>
            <a href="#">移动优惠购</a>
            <a href="#">电信优惠购</a>
           </dd>
        </dl>
        <!-- 加入购物车 -->
        <div class="add clearfix">
          <!-- 左侧数字盒子 -->
          <div class="num1 fl">
            <input type="text" value="1">
            <span class="jia">+</span>
            <span class="jian">-</span>
          </div>
          <!-- 右侧a链接 -->
          <a href="#" class="btn fl">加入购物车</a>
        </div>
     </div>
     
   </div>
   <!-- 产品信息展示 结束 -->

   <!-- 详情页具体内容 开始 -->
   <div class="w mix clearfix">
     <!-- 左侧导航部分 -->
     <div class="side fl">
       <!-- 选项卡导航  上面-->
       <div class="tab">
         <ul class="tab_nav clearfix">
           <li class="first">相关分类</li>
           <li class="second red">品牌推荐</li>
         </ul>
       </div>
       <!-- 选项卡内容 -->
       <div class="tab_con">
         <ul class="item">
           <li>
             <img src="./upload/aside_img.jpg" alt="">
             <h4>华为 HUAWEI P20 Pro 全面屏徕卡</h4>
             <p class="pri">¥19</p>
             <a href="#" class="btn2">加入购物车</a>
           </li>
           <li>
            <img src="./upload/aside_img.jpg" alt="">
            <h4>华为 HUAWEI P20 Pro 全面屏徕卡</h4>
            <p class="pri">¥19</p>
            <a href="#" class="btn2">加入购物车</a>
          </li>
          <li>
            <img src="./upload/aside_img.jpg" alt="">
            <h4>华为 HUAWEI P20 Pro 全面屏徕卡</h4>
            <p class="pri">¥19</p>
            <a href="#" class="btn2">加入购物车</a>
          </li>
          <li>
            <img src="./upload/aside_img.jpg" alt="">
            <h4>华为 HUAWEI P20 Pro 全面屏徕卡</h4>
            <p class="pri">¥19</p>
            <a href="#" class="btn2">加入购物车</a>
          </li>
          <li>
            <img src="./upload/aside_img.jpg" alt="">
            <h4>华为 HUAWEI P20 Pro 全面屏徕卡</h4>
            <p class="pri">¥19</p>
            <a href="#" class="btn2">加入购物车</a>
          </li>
          <li>
            <img src="./upload/aside_img.jpg" alt="">
            <h4>华为 HUAWEI P20 Pro 全面屏徕卡</h4>
            <p class="pri">¥19</p>
            <a href="#" class="btn2">加入购物车</a>
          </li>
          <li>
            <img src="./upload/aside_img.jpg" alt="">
            <h4>华为 HUAWEI P20 Pro 全面屏徕卡</h4>
            <p class="pri">¥19</p>
            <a href="#" class="btn2">加入购物车</a>
          </li>
         </ul>
       </div>
     </div>
     <!-- 右侧内容部分 下面-->
     <div class="con fr">
       <!-- tab -->
       <div class="con_tab">
        <ul class="con_nav clearfix">
          <li class="choice">商品介绍</li>
          <li>规格与包装</li>
          <li>售后保障</li>
          <li>商品评价（50000）</li>
          <li>手机社区</li>  
        </ul>
       </div>
       <!-- tab_con -->
       <div class="con_tab_con">
         <ul>
           <li>分辨率：1920*1080(FHD)</li>
           <li>后置摄像头：1200万像素</li>
           <li>前置摄像头：500万像素</li>
           <li>核      数：其他</li>
           <li>频      率：以官网信息为准</li>
           <li>品牌： Apple ♥关注</li>
           <li>商品名称：APPLEiPhone 6s Plus</li>
           <li>商品编号：1861098</li>
           <li>商品毛重：0.51kg</li>
           <li>商品产地：中国大陆</li>
           <li>热点：指纹识别，Apple Pay，金属机身，拍照神器</li>
           <li>系统：苹果（IOS）</li>
           <li>像素：1000-1600万</li>
           <li>机身内存：64GB</li>
         </ul>
       </div>
       <!-- a链接 -->
       <a href="javascript:;" class="more">查看更多参数 <span class="iconfont">&#xe6b7;</span></a>
       <!-- 一堆图片 -->
       <img src="./upload/detail_img1.jpg" alt="">
       <img src="./upload/detail_img2.jpg" alt="">
       <img src="./upload/detail_img3.jpg" alt="">
       
     </div>
     
   </div>
   <!-- 详情页具体内容 结束 -->
    <!-- nav e -->
    <div class="footer">
      <div class="w">
             <!-- foot_up -->
        <div class="foot_up">
            <ul>
              <li>
                <div class="icon"></div>
                <h4>极速物流</h4>
                <p>急速物流，急速送达</p>
              </li>
              <li>
                <div class="icon"></div>
                <h4>极速物流</h4>
                <p>急速物流，急速送达</p>
              </li>
              <li>
                <div class="icon"></div>
                <h4>极速物流</h4>
                <p>急速物流，急速送达</p>
              </li>
              <li>
                <div class="icon"></div>
                <h4>极速物流</h4>
                <p>急速物流，急速送达</p>
              </li>
              <li>
                <div class="icon"></div>
                <h4>极速物流</h4>
                <p>急速物流，急速送达</p>
              </li>
            </ul>
          </div>
          <!-- foot_middle -->
          <div class="foot_middle">
            <dl>
              <dt>购物指南</dt>
              <dd><a href="#">购物流程</a></dd>
              <dd><a href="#">会员介绍</a></dd>
              <dd><a href="#">生活旅行/团购</a></dd>
              <dd><a href="#">常见问题</a></dd>
              <dd><a href="#">大家电</a></dd>
              <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
              <dt>购物指南</dt>
              <dd><a href="#">购物流程</a></dd>
              <dd><a href="#">会员介绍</a></dd>
              <dd><a href="#">生活旅行/团购</a></dd>
              <dd><a href="#">常见问题</a></dd>
              <dd><a href="#">大家电</a></dd>
              <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
              <dt>购物指南</dt>
              <dd><a href="#">购物流程</a></dd>
              <dd><a href="#">会员介绍</a></dd>
              <dd><a href="#">生活旅行/团购</a></dd>
              <dd><a href="#">常见问题</a></dd>
              <dd><a href="#">大家电</a></dd>
              <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
              <dt>购物指南</dt>
              <dd><a href="#">购物流程</a></dd>
              <dd><a href="#">会员介绍</a></dd>
              <dd><a href="#">生活旅行/团购</a></dd>
              <dd><a href="#">常见问题</a></dd>
              <dd><a href="#">大家电</a></dd>
              <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
              <dt>购物指南</dt>
              <dd><a href="#">购物流程</a></dd>
              <dd><a href="#">会员介绍</a></dd>
              <dd><a href="#">生活旅行/团购</a></dd>
              <dd><a href="#">常见问题</a></dd>
              <dd><a href="#">大家电</a></dd>
              <dd><a href="#">联系客服</a></dd>
            </dl>
            <dl>
              <dt>购物指南</dt>
              <dd>
                <img src="./img/wx_cz.jpg" alt="" />
                <p>品优购客户端</p>
              </dd>
            </dl>
          </div>
          <!-- foot_down -->
          <div class="foot_down">
            <p>
              <a href="#">关于我们</a><span>|</span> <a href="#">联系我们</a
              ><span>|</span> <a href="#">联系客服</a><span>|</span>
              <a href="#">商家入驻</a><span>|</span> <a href="#">营销中心</a
              ><span>|</span> <a href="#">手机品优购</a><span>|</span>
              <a href="#">友情链接</a><span>|</span> <a href="#">销售联盟</a
              ><span>|</span> <a href="#">品优购社区</a><span>|</span>
              <a href="#">品优购公益</a><span>|</span> <a href="#">English Site</a
              ><span>|</span>
              <a href="#">Contact U</a>
            </p>
            <p>
              地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096
              电话：400-618-4000 传真：010-82935100 邮箱: zhanghj+itcast.cn<br />
              京ICP备08001421号京公网安备110108007702
            </p>
          </div>
      </div>
       
      </div>

    </div>
  </body>
</html>
